<template>
  <div class="swiper-banner">
    <van-swipe :autoplay="2000" :duration="1500">
      <van-swipe-item v-for="pic in bannerList" :key="pic.id">
        <img v-lazy="pic.picUrl" />
      </van-swipe-item>
    </van-swipe>
  </div>
</template>

<script>
export default {
  data() {
    return {
      swiper: {}
    };
  },
  props: {
    bannerList: {
      type: Array,
      required: true
    }
  }
};
</script>

<style lang="less" scoped>
.swiper-banner {
  img {
    width: 100%;
    height: 207px;
  }
}
/deep/.van-swipe__indicators {
  bottom: 6px!important;
  /deep/.van-swipe__indicator {
    margin-right: 2px !important;
    width: 6px !important;
    height: 6px !important;
    border: 1px solid rgb(236, 236, 236) !important;
    border-radius: 50% !important;
    background: transparent !important;
  }
  /deep/.van-swipe__indicator--active {
    background: #1fdb9b !important;
  }
}
</style>